{# var: storage_editable bool #}
{# var: is_entity bool #}
{# var: storageUnitsArr array #}
<div class='mb-2'>
  <a class='rounded p-1 hl-hover-gray' href='#' data-action='toggle-all-storage' data-expand='1'>{{ 'Expand all'|trans }}</a>
  <a class='rounded p-1 hl-hover-gray' href='#' data-action='toggle-all-storage'>{{ 'Collapse all'|trans }}</a>
</div>
{% if App.devMode and storage_editable -%}
  <!-- [html-validate-disable-block prefer-native-element: suppress errors] -->
{%- endif %}
<div id='storageDiv'>
  {% macro render_items(items, groupedItems, storage_editable, is_entity=true) %}
    <ul class='list-group'>
      {% for item in items %}
        <li class='list-group-item py-1'>
          {# this data-id is used to open it up after adding children #}
          <details data-id='{{ item.id }}'>
            <summary>{{ item.name }} {% if item.children_count > 0 %}({{ item.children_count }}){% endif %}</summary>
            <div class='mb-1'>
              {% if is_entity %}
                <button type='button' class='btn btn-primary btn-sm' data-id='{{ item.id }}' data-dismiss='modal' data-action='create-container'><i class='fas fa-location-dot mr-1 color-white'></i>{{ 'Store in %s'|trans|format(item.name) }}</button>
              {% else %}
                <a class='btn btn-secondary btn-sm' href='?storage_unit={{ item.id }}'><i class='fas fa-magnifying-glass mr-1 color-white'></i>{{ 'Display content'|trans }}</a>
              {% endif %}
              {% if storage_editable %}
                <button type='button' class='btn btn-secondary btn-sm' data-parent-id='{{ item.id }}' data-action='add-storage-children'><i class='fas fa-plus-circle mr-1 color-white'></i>{{ 'Add children to %s'|trans|format(item.name) }}</button>
                <button type='button' class='btn btn-secondary btn-sm' data-action='rename-storage' data-id='{{ item.id }}'><i class='fas fa-pencil-alt mr-1 color-white'></i>{{ 'Rename'|trans }}</button>
                <button type='button' class='btn btn-danger btn-sm' data-id='{{ item.id }}' data-action='destroy-storage'><i class='fas fa-minus-circle mr-1 color-white'></i>{{ 'Delete %s and its children'|trans|format(item.name) }}</button>
              {% endif %}
            </div>
            {% if groupedItems[item.id] is defined %}
              {# Recursively render the children #}
              {{ _self.render_items(groupedItems[item.id], groupedItems, storage_editable, is_entity) }}
            {% endif %}
          </details>
        </li>
      {% endfor %}
    </ul>
  {% endmacro %}

  {# Start rendering from the root level, which has parent_id = null #}
  {% for root in storageUnitsArr[null] %}
    <div class='box'>
      <p class='smallgray'>{{ 'Inventory location'|trans }}</p>
      <div class='d-flex'>
        <div>
          <i class='fas fa-location-dot mr-2'></i><span class='{{ storage_editable ? 'malleableColumn hl-hover-gray' }} p-1 rounded font-weight-bold' data-endpoint='storage_units' data-id='{{ root.id }}' data-target='name'>{{ root.name }}</span>
        </div>
        {% if storage_editable %}
          <div class='ml-auto'>
            <button type='button' class='btn btn-secondary btn-sm' title='{{ 'Add children to %s'|trans|format(root.name) }}' aria-label='{{ 'Add children to %s'|trans|format(root.name) }}' data-parent-id='{{ root.id }}' data-action='add-storage-children'><i class='fas fa-plus-circle color-white'></i></button>
            {# search with name instead of id for parent #}
            <a class='btn btn-secondary btn-sm' title='{{ 'Display content'|trans }}' href='?q={{ root.name }}'><i class='fas fa-magnifying-glass color-white'></i></a>
            <a class='btn btn-danger btn-sm' data-action='delete-storage-root' data-id='{{ root.id }}' title='{{ 'Delete'|trans }}'><i class='fas fa-xmark color-white'></i></a>
          </div>
        {% endif %}
      </div>
      <hr>
      {# now render the children of this root element #}
      {{ _self.render_items(storageUnitsArr[root.id], storageUnitsArr, storage_editable, is_entity) }}
    </div>
  {% endfor %}
</div>
